<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="favicon.ico" />
<!--jquery库-->
<script src="js/jquery.min.js"></script>
<!--bootstrap库-->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>

<!--font-awesome字体库-->
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!--页面加载进度条-->
<link href="css/pace/dataurl.css" rel="stylesheet" />
<script src="js/pace/pace.min.js"></script>

<!--jquery.hammer手势插件-->
<script src="js/jquery.hammer/hammer.min.js"></script>
<script src="js/jquery.hammer/jquery.hammer.js"></script>

<!--平滑滚动到顶部库-->
<script src="js/jquery.scrolltopcontrol/scrolltopcontrol.js"
	type="text/javascript"></script>


<!--主要写的css代码-->
<link href="css/default.css" rel="stylesheet" type="text/css" />

<!--主要写的js代码-->
<script src="js/default.js" type="text/javascript"></script>
<title>${sessionScope.cname } 的订单列表</title>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle show pull-left"
				data-target="sidebar">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span><span class="icon-bar"></span><span
					class="icon-bar"></span>
			</button>
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span><span class="icon-bar"></span><span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="showMerchants">外卖订餐系统</a>
		</div>
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li><a href="showMerchants">首页</a></li>
				

			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
	                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
	                           aria-expanded="false"><i class="fa fa-user fa-fw"></i>&nbsp;${sessionScope.cname }&nbsp;<span class="caret"></span></a>
	                        <ul class="dropdown-menu" role="menu">
	                            <li><a href="toorderlist">订单列表</a></li>
                                <li><a href="toaddress">配送地址管理</a></li>
                                <li><a href="tologout">退出登录</a></li>
	                        </ul>
	             </li>
			</ul>
		</div>
	</div>
	</nav>
	<div class="container-fluid all">
		<div class="sidebar">
			<div>
				<h3 align="center">我的订单</h3>
				<div></div>
			</div>
			<ul class="nav" style="margin-top: 200px">
				<li class="has-sub"><a href="javascript:void(0);"><span
						style="align-content: center">订单选项</span><i
						class="fa fa-caret-right fa-fw pull-right"></i></a>
					<ul class="sub-menu">
						<li><a href="getalls" class="check"><i
								class="fa fa-circle-o fa-fw"></i>&nbsp;全部订单</a></li>
						<li><a state="0" class="checkstate"><i
								class="fa fa-circle-o fa-fw"></i>&nbsp;待接订单</a></li>
						<li><a state="1" class="checkstate"><i
								class="fa fa-circle-o fa-fw"></i>&nbsp;已接订单</a></li>
						<li><a state="2" class="checkstate"><i
								class="fa fa-circle-o fa-fw"></i>&nbsp;被拒订单</a></li>
						<li><a state="3" class="checkstate"><i
								class="fa fa-circle-o fa-fw"></i>&nbsp;配送中订单</a></li>
						<li><a state="4" class="checkstate"><i
								class="fa fa-circle-o fa-fw"></i>&nbsp;已完成订单</a></li>
						<li><a state="5" class="checkstate"><i
								class="fa fa-circle-o fa-fw"></i>&nbsp;已取消订单</a></li>
					</ul></li>
			</ul>
		</div>
		<table class="table table-hover">
			<thead>
				<tr>

					<th>订单ID</th>
					<th>商家名称</th>
					<th>总价</th>
					<th>状态</th>
					<th>下定时间</th>
					<th>想看详情就点我</th>
				</tr>
			</thead>
			<tbody  id="orderTable">
			</tbody>
		</table>

	</div>
	<a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a>
	<script type="text/javascript">
		(function() {
			var obj = {};
			obj.ajax = function(type, url, data, headers, context, callback) {
				$.ajax({
					type : type,
					url : url,
					data : JSON.stringify(data),
					headers : headers,
					context : context
				}).done(callback);
			};
			window.j = obj;
		})();
		
		
		function formatDate(time){
			var now = new Date(time);     
			var year=now.getFullYear();
	        var month=now.getMonth()+1;
	        if(month<10)
	        	month="0"+month;
	        var date=now.getDate();
	        if(date<10)
	        	date="0"+date;
	        var hour=now.getHours();
	        var minute=now.getMinutes(); 
	        var second=now.getSeconds();
	        return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;   
		}



		function OrderComponent(template) {
			this.model = null;
			this.template = template;

			//   找所有的Order 
			this.findAllOrder = function() {
				j.ajax("GET", "getalls", null, null, this, function(orders) {
					this.model = orders;
					_render(this.model);
				});

			};

			//  找不同状态的订单    
			this.findOrdersByState = function(state) {
				j.ajax("GET", "getbystatus?state="+state, null, null, this, function(
						orders) {
					this.model = orders;
					_render(this.model);
				});

			};

			function _render(data) {
				template.empty();
				$(data).each(function(index, item) {
					var showstate="";
					var trclass= "";
					if(item.ostate == "0"){
						trclass = "info";
						showstate="待接单";
					}else if(item.ostate == "1"){
						trclass = "danger";
						showstate="已接单";
					}else if(item.ostate == "2"){
						trclass = "warning";
						showstate="已拒接";
					}else if(item.ostate == "3"){
						trclass = "active";
						showstate="正在配送";
					}else if(item.ostate == "4"){
						trclass = "success";
						showstate="订单完成";
					}else if(item.ostate == "5"){
						trclass="primary";
						showstate="取消订单";
					}
					
					$("<tr/>").attr("class",trclass).append($("<td/>").html(item.oid))
					  .append($("<td/>").html(item.mname))
					   .append($("<td/>").html(item.osum))
					   .append($("<td/>").html(showstate))
					   .append($("<td/>").html(formatDate(item.time)))
					   .append($("<td/>")
							   .append($("<button/>").attr("class","detailbtn btn btn-info")
									   .append($("<a/>").attr("href","detail?oid=" + item.oid).html("详情"))))
					   .appendTo($("#orderTable"));
				});

			}
		}
		
		$(function() {
			var o = new OrderComponent($("#orderTable"));
			o.findAllOrder();
			$(".check").click(function(event) {
				event.preventDefault();
				o.findAllOrder(); 
			});
			
			$("a.checkstate").click(function(event) {
				event.preventDefault();
				var ostate = $(this).attr("state");
				alert(ostate);
				o.findOrdersByState(ostate); 
			});
			
		}) 
	</script>
</body>
</html>